<template>
  <section class="tools-page">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        类型匹配
      </div>
      <div class="text item">
        <a href="https://tool.oschina.net/uploads/apidocs/jquery/regexp.html" target="_blank">***正则表达式手册***</a>
        <p>
          <span>内容</span>
          <span>校验结果</span>
        </p>
        <p v-for="(item, index) in RegExps" :key="index">
          <el-input v-model="item.value" clearable placeholder="请输入校验内容" class="content">
            <span slot="prepend" style="width: 100px;text-align: center;display: inline-block;">{{ index }}</span>
          </el-input>
          <span :class="{ right: item.RegExp(item.value) }">{{ item.RegExp(item.value) }}</span>
        </p>
        <p v-for="(item, index) in types" :key="index">
          <span class="label">{{ item.type }}</span>
          <code>{{ item.value }}</code>
          <span :class="{ right: item.RegExp(item.value) }">{{ item.RegExp(item.value) }}</span>
        </p>
      </div>
    </el-card>
  </section>
</template>
<script>
import {
  isQQ,
  isName,
  isEmail,
  isMobile,
  isNumber,
  isAmount,
  isPassword,
  isCreditid,
  isObject,
  isFunction
} from '@utils/type-judge'
export default {
  data () {
    return {
      RegExps: {
        isQQ: {
          value: '',
          RegExp: isQQ
        },
        isName: {
          value: '',
          RegExp: isName
        },
        isEmail: {
          value: '',
          RegExp: isEmail
        },
        isMobile: {
          value: '',
          RegExp: isMobile
        },
        isNumber: {
          value: null,
          RegExp: isNumber
        },
        isAmount: {
          value: null,
          RegExp: isAmount
        },
        isPassword: {
          value: '',
          RegExp: isPassword
        },
        isCreditid: {
          value: '',
          RegExp: isCreditid
        }
      },
      types: [{
        type: 'isObject',
        value: {
          name: 'xf'
        },
        RegExp: isObject
      }, {
        type: 'isFunction',
        value: function xf () {
          console.log(223)
        },
        RegExp: isFunction
      }]
    }
  }
}
</script>
<style lang="less" scoped>
p {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  .content {
    margin-right: 100px;
    flex: 1;
  }
  span {
    display: inline-block;
    text-align: right;
    &.label {
      width: 140px;
      text-align: center;
      line-height: 40px;
      color: #909399;
      background: #F5F7FA;
      border: 1px solid #DCDFE6;
    }
    &.right {
      color: #f00;
    }
  }
}
</style>
